<template>
	<view class="container">
		<view class=".bg"></view>
	    <view class="top-group">
	        <view class="pri" v-for="(item,index) in topList" :key = "index" @click="selectMe(index)">
	            <view :class="item.textClass">{{item.title}}</view>
	            <view :class="item.lineClass"></view>
	        </view>
	    </view>
	    <view class="bot-group">
			<uni-card>
				<text>订单号：{{orderId}}</text>
				<text>打印费用：{{orderAmount}}</text>
				<text>下单时间：{{orderCreationTime}}</text>
				<text>打印时间：</text>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				topList: [
					{
						id: 0,
						title: "未打印", 
						textClass: "pri-text-se",
						lineClass: "pri-line-se"
					}, 
					{
						id: 1,
						title: "已打印",
						 textClass: "pri-text-un",
						 lineClass:"pri-line-un",
					}
				],
				se: 0,
				orderId:'',
				orderAmount:'',
				orderCreationTime:'',
			}
		},
		methods:{
			selectMe (e) {
				// debugger
				let arr = this.topList;
				let id = e;
				for(let i = 0;i < arr.length; i++) {
					if(i == id) {
						arr[i].textClass = "pri-text-se";
						arr[i].lineClass = "pri-line-se";
					} else {
						arr[i].textClass = "pri-text-un";
						arr[i].lineClass = "pri-line-un";
					}
				}
				this.se = id;
				this.topList = arr;
			}
		}
	}
</script>

<style>
	/* pages/his_order/his_order.wxss */
	.bot-group{
		border: 1px solid #0066CC;
	}
	
	.container{
	    padding: 0%;
	}
	.bg{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		/* background-color: #f8f8f8; */
	}
	.top-group{
	    background-color: #f8f8f8 ;
	    width: 100%;
	    height: 80rpx;
	    display: flex;
	    justify-content: space-evenly;
	    align-items: flex-end;
		border: 1rpx solid #000000;
	}
	
	
	.pri{
	    background-color: #f8f8f8;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	.pri-line-un {
	    width:50rpx;
	    height:6rpx;
	    border-radius: 10rpx;
	    background-color:#f8f8f8;
	    margin-top: 10rpx;
	}
	
	.pri-line-se {
	    width:50rpx;
	    height:6rpx;
	    border-radius: 10rpx;
	    background-color:red;
	    margin-top: 10rpx;
	}
	
	.pri-text-un {
	    color: #AAAAAA;
	}
	
	.pri-text-se {
	    color: red;
	}
	
</style>
